<template>
  <div class="dashboard-container">
    <!-- 平台头部 -->
    <div class="platform-header">
      <h1>校园二手交易平台</h1>
      <p>买卖闲置物品，让校园生活更便捷</p>
    </div>

    <!-- 搜索区域 -->
    <div class="search-section">
      <el-input
        v-model="searchQuery"
        placeholder="搜索商品..."
        class="search-input"
        clearable
        @keyup.enter="handleSearch"
      >
        <template #append>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
          </el-button>
        </template>
      </el-input>
    </div>

    <!-- 分类标签 -->
    <div class="category-section">
      <el-tabs v-model="activeCategory" @tab-change="handleCategoryChange">
        <el-tab-pane
          v-for="category in categories"
          :key="category.value"
          :label="category.label"
          :name="category.value"
        />
      </el-tabs>
    </div>

    <!-- 商品展示 -->
    <div class="goods-section">
      <el-row :gutter="20">
        <el-col
          v-for="item in filteredItems"
          :key="item.id"
          :xs="24"
          :sm="12"
          :md="8"
          :lg="6"
        >
          <el-card 
            class="goods-card" 
            shadow="hover"
            @click="viewItemDetail(item.id)"
          >
            <div class="goods-image-container">
              <img 
                :src="item.image" 
                :alt="item.title"
                class="goods-image"
              >
              <div class="price-tag">¥{{ item.price }}</div>
            </div>
            <div class="goods-info">
              <h3 class="goods-title">{{ item.title }}</h3>
              <div class="goods-meta">
                <span class="location">
                  <el-icon><Location /></el-icon>
                  {{ item.location }}
                </span>
                <span class="time">
                  <el-icon><Clock /></el-icon>
                  {{ item.time }}
                </span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <!-- 空状态 -->
      <el-empty 
        v-if="filteredItems.length === 0"
        description="没有找到相关商品"
        :image-size="200"
      />
    </div>

    <!-- 底部 -->
    <div class="footer-section">
      <el-button type="text" @click="goToLogin">退出登录</el-button>
      <span>© 2024 校园二手交易平台 版权所有</span>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { Search, Location, Clock } from '@element-plus/icons-vue'

const router = useRouter()

// 搜索相关
const searchQuery = ref('')
const activeCategory = ref('all')

// 商品分类
const categories = [
  { label: '全部', value: 'all' },
  { label: '书籍', value: 'books' },
  { label: '电子产品', value: 'electronics' },
  { label: '服饰', value: 'clothing' },
  { label: '生活用品', value: 'daily' },
  { label: '其他', value: 'others' }
]

// 商品数据
const goodsItems = ref([
  {
    id: 1,
    title: '计算机科学导论教材',
    price: 25,
    location: '计算机学院',
    time: '1天前',
    image: 'https://picsum.photos/300/200?random=1',
    category: 'books'
  },
  {
    id: 2,
    title: '九成新iPhone 12',
    price: 2800,
    location: '电子信息学院',
    time: '3天前',
    image: 'https://picsum.photos/300/200?random=2',
    category: 'electronics'
  },
  {
    id: 3,
    title: '冬季羽绒服',
    price: 150,
    location: '文学院',
    time: '5天前',
    image: 'https://picsum.photos/300/200?random=3',
    category: 'clothing'
  },
  {
    id: 4,
    title: '台灯',
    price: 30,
    location: '宿舍区',
    time: '2天前',
    image: 'https://picsum.photos/300/200?random=4',
    category: 'daily'
  },
  {
    id: 5,
    title: '高等数学辅导书',
    price: 20,
    location: '理学院',
    time: '1周前',
    image: 'https://picsum.photos/300/200?random=5',
    category: 'books'
  },
  {
    id: 6,
    title: '篮球',
    price: 50,
    location: '体育场',
    time: '3天前',
    image: 'https://picsum.photos/300/200?random=6',
    category: 'others'
  },
  {
    id: 7,
    title: '段玉康',
    price: 50,
    location: '电子与信息工程学院',
    time: '3天前',
    image: 'https://picsum.photos/300/200?random=7',
    category: 'others'
  }
])

// 筛选商品
const filteredItems = computed(() => {
  let items = [...goodsItems.value]
  
  if (activeCategory.value !== 'all') {
    items = items.filter(item => item.category === activeCategory.value)
  }
  
  if (searchQuery.value.trim()) {
    const query = searchQuery.value.toLowerCase().trim()
    items = items.filter(item => 
      item.title.toLowerCase().includes(query) ||
      item.location.toLowerCase().includes(query)
    )
  }
  
  return items
})

// 搜索处理
const handleSearch = () => {
  console.log('搜索:', searchQuery.value)
}

// 分类切换
const handleCategoryChange = (tabName) => {
  console.log('切换到分类:', tabName)
}

// 查看商品详情
const viewItemDetail = (id) => {
  router.push({ name: 'item-detail', params: { id } })
}

// 退出登录
const goToLogin = () => {
  router.push('/login')
}
</script>

<style scoped>
.dashboard-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 平台头部 */
.platform-header {
  text-align: center;
  margin-bottom: 30px;
  
  h1 {
    font-size: 28px;
    color: #333;
    margin-bottom: 10px;
  }
  
  p {
    font-size: 16px;
    color: #999;
    margin: 0;
  }
}

/* 搜索区域 */
.search-section {
  margin-bottom: 20px;
  
  .search-input {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }
}

/* 商品卡片 */
.goods-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }
  
  .goods-image-container {
    position: relative;
    height: 200px;
    overflow: hidden;
    border-radius: 4px;
    
    .goods-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .price-tag {
      position: absolute;
      bottom: 10px;
      right: 10px;
      background: var(--el-color-primary);
      color: white;
      padding: 4px 12px;
      border-radius: 4px;
      font-weight: bold;
    }
  }
  
  .goods-info {
    padding: 15px;
    
    .goods-title {
      font-size: 16px;
      margin: 0 0 8px 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .goods-meta {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #999;
      
      .el-icon {
        margin-right: 4px;
      }
    }
  }
}

/* 底部 */
.footer-section {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #999;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dashboard-container {
    padding: 15px;
  }
  
  .goods-card {
    .goods-image-container {
      height: 150px;
    }
  }
}
</style>